<%@ page import="java.util.Map" %>
<%@ page import="java.util.Set" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";

	Map<String, String> pMap = (Map<String, String>) application.getAttribute("pMap");

	Set<String> set = pMap.keySet();

%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">

		<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
			  rel="stylesheet"/>

		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript"
				src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
		<script>

            var json = {

                <%
					for (String key : set){
						String value = pMap.get(key);
				%>
                "<%=key%>": <%=value%>,
                <%
					}
				%>

            };

            //alert(json);

            $(function () {

                /*
                	关于阶段和可能性
                		是一种一一对应的关系
                		一个阶段对应一个可能性
                		我们现在可以将阶段和可能性想象成一种是键值对的对应关系
                		以阶段为key,通过选中的阶段,触发可能性value

                		stage				possibility
                		key					value
                		01资质审查			10
                		02需求分析			25
                		03价值建议			40
                		..
                		..
                		07成交				100
                		08					0
                		09					0

                		对于以上的数据,通过观察得到结论:
                			1.数据量不是很大
                			2.这是一种键值对的对应关系

                		如果同时满足以上两种结论,那么我们将这样的数据保存到数据库表中就没有什么意义了
                		如果遇到这种情况,我们需要用到properties属性文件来进行保存
                		stage2Possibility.properties(对中文的支持很差)
						01资质审查=10
						02需求分析=20

						stage2Possibility.properties这个文件表示的是阶段键值对之间的对应关系
						将来,我们通过stage,以及对应关系,来取得可能性这个值
						这种需求在交易模块中需要大量的使用到

						所以我们就需要将该文件解析到服务器缓存中
						application.setAttribute(stage2Possibility.properties文件内容);
                */

                //自动补全的控件
                $("#create-customerName").typeahead({
                    source: function (query, process) {
                        $.get(
                            "workbench/transaction/getCustomerName.do",
                            {"name": query},
                            function (data) {
                                //alert(data);
                                /*
									data:
										[{客户名称1},{2},{3}]
								 */
                                process(data);
                            },
                            "json"
                        );
                    },
                    delay: 1500//延迟加载的时间
                });

                //日历的控件
                $(".time1").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });
                $(".time2").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "top-left"
                });

                //为查找市场源模态窗口的输入框绑定键盘输入事件
                $("#aName").keydown(function (event) {

                    if (event.keyCode === 13) {
                        $.ajax({
                            url: "workbench/transaction/getActivityListByName.do",
                            data: {
                                "aName": $.trim($("#aName").val()),
                            },
                            type: "get",
                            dataType: "json",
                            success: function (data) {
                                var html = "";
                                $.each(data, function (i, n) {
                                    html += '<tr>';
                                    html += '<td><input type="radio" name="xz" value="' + n.id + '"/></td>';
                                    html += '<td id="' + n.id + '">' + n.name + '</td>';
                                    html += '<td>' + n.startDate + '</td>';
                                    html += '<td>' + n.endDate + '</td>';
                                    html += '<td>' + n.owner + '</td>';
                                    html += '</tr>';
                                    $("#activitySearchBody").html(html);
                                })
                            }
                        })
                        return false;
                    }
                })

                //为查找市场活动源模态窗口中的提交按钮绑定事件
                $("#submitActivityBtn").click(function () {
                    var $xz = $("input[name=xz]:checked");

                    var id = $xz.val();
                    var name = $("#" + id).html();

                    $("#create-activitySrc").val(name);
                    $("#activityId").val(id);

                    //将搜索框中的内容以及查询结果清除
                    $("#aName").val("");
                    $("#activitySearchBody").html("");

                    //关闭模态窗口
                    $("#findMarketActivity").modal("hide");
                })

                //为查找市场源模态窗口的输入框绑定键盘输入事件
                $("#cFullName").keydown(function (event) {
                    if (event.keyCode === 13) {
                        $.ajax({
                            url: "workbench/transaction/getContactsListByName.do",
                            data: {
                                "cFullName": $.trim($("#cFullName").val()),
                            },
                            type: "get",
                            dataType: "json",
                            success: function (data) {
                                var html = "";
                                $.each(data, function (i, n) {
                                    html += '<tr>';
                                    html += '<td><input type="radio" name="xz" value="' + n.id + '"/></td>';
                                    html += '<td id="' + n.id + '">' + n.fullname + '</td>';
                                    html += '<td>' + n.email + '</td>';
                                    html += '<td>' + n.mphone + '</td>';
                                    html += '</tr>';
                                    $("#contactsSearchBody").html(html);
                                })
                            }
                        })
                        return false;
                    }
                })

                //为查找联系人模态窗口中的提交按钮绑定事件
                $("#submitContactsBtn").click(function () {
                    var $xz = $("input[name=xz]:checked");

                    var id = $xz.val();
                    var name = $("#" + id).html();

                    $("#create-contactsName").val(name);
                    $("#contactsId").val(id);

                    //将搜索框中的内容以及查询结果清除
                    $("#cFullName").val("");
                    $("#contactsSearchBody").html("");

                    //关闭模态窗口
                    $("#findContacts").modal("hide");
                });

                // 为阶段的下拉框绑定选中下拉框的事件,根据选中的阶段填写可能性
                $("#create-stage").change(function () {

                    //取得选中的阶段
                    var stage = $("#create-stage").val();


                    /*
						目标:填写可能性

						阶段有了stage
						阶段和可能性之间的对应关系pMap,但是pMap是java语言中的map对象
						需要将pMap转换成js中的键值对关系json

						以上我们已经将json处理好了

						接下来取可能性
					 */

                    /*
						不能以json.key的形式不能取得value
						因为今天的stage是一个可变量
						如果是这样的key,那么我们就不能用传统的json.key 的形式来取值
						我们要使用这样的取值方式为
						json[key]

					 */
                    var possibility = json[stage];

                    $("#create-possibility").val(possibility);

                })


            })

		</script>

	</head>
	<body>

		<!-- 查找市场活动 -->
		<div class="modal fade" id="findMarketActivity" role="dialog">
			<div class="modal-dialog" role="document" style="width: 80%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">查找市场活动</h4>
					</div>
					<div class="modal-body">
						<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
							<form class="form-inline" role="form">
								<div class="form-group has-feedback">
									<input type="text" class="form-control" id="aName" style="width: 300px;"
										   placeholder="请输入市场活动名称，支持模糊查询">
									<span class="glyphicon glyphicon-search form-control-feedback"></span>
								</div>
							</form>
						</div>
						<table id="activityTable3" class="table table-hover"
							   style="width: 900px; position: relative;top: 10px;">
							<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
							</thead>
							<tbody id="activitySearchBody">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>--%>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="submitActivityBtn">提交</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 查找联系人 -->
		<div class="modal fade" id="findContacts" role="dialog">
			<div class="modal-dialog" role="document" style="width: 80%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">查找联系人</h4>
					</div>
					<div class="modal-body">
						<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
							<form class="form-inline" role="form">
								<div class="form-group has-feedback">
									<input type="text" class="form-control" id="cFullName" style="width: 300px;"
										   placeholder="请输入联系人名称，支持模糊查询">
									<span class="glyphicon glyphicon-search form-control-feedback"></span>
								</div>
							</form>
						</div>
						<table id="activityTable" class="table table-hover"
							   style="width: 900px; position: relative;top: 10px;">
							<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
							</thead>
							<tbody id="contactsSearchBody">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>--%>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="submitContactsBtn">提交</button>
					</div>
				</div>
			</div>
		</div>


		<div style="position:  relative; left: 30px;">
			<h3>创建交易</h3>
			<div style="position: relative; top: -40px; left: 70%;">
				<button type="button" class="btn btn-primary">保存</button>
				<button type="button" class="btn btn-default">取消</button>
			</div>
			<hr style="position: relative; top: -40px;">
		</div>
		<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
			<div class="form-group">
				<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span
						style="font-size: 15px; color: red;">*</span></label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-transactionOwner">
						<option></option>
						<c:forEach items="${uList}" var="u">
							<option value="${u.id}" ${user.id eq u.id ? "selected":""}>${u.name}</option>
						</c:forEach>
					</select>
				</div>
				<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" id="create-amountOfMoney">
				</div>
			</div>

			<div class="form-group">
				<label for="create-transactionName" class="col-sm-2 control-label">名称<span
						style="font-size: 15px; color: red;">*</span></label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" id="create-transactionName">
				</div>
				<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span
						style="font-size: 15px; color: red;">*</span></label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control time1" id="create-expectedClosingDate">
				</div>
			</div>

			<div class="form-group">
				<label for="create-customerName" class="col-sm-2 control-label">客户名称<span
						style="font-size: 15px; color: red;">*</span></label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" id="create-customerName" placeholder="支持自动补全，输入客户不存在则新建">
				</div>
				<label for="create-stage" class="col-sm-2 control-label">阶段<span
						style="font-size: 15px; color: red;">*</span></label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-stage">
						<option></option>
						<c:forEach items="${stageList}" var="s">
							<option value="${s.value}">${s.text}</option>
						</c:forEach>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-transactionType">
						<option></option>
						<c:forEach items="${transactionTypeList}" var="t">
							<option value="${t.value}">${t.text}</option>
						</c:forEach>
					</select>
				</div>
				<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" id="create-possibility">
				</div>
			</div>

			<div class="form-group">
				<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
				<div class="col-sm-10" style="width: 300px;">
					<select class="form-control" id="create-clueSource">
						<option></option>
						<c:forEach items="${sourceList}" var="s">
							<option value="${s.value}">${s.text}</option>
						</c:forEach>
					</select>
				</div>
				<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a
						href="javascript:void(0);" data-toggle="modal" data-target="#findMarketActivity"><span
						class="glyphicon glyphicon-search"></span></a></label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" placeholder="点击左边搜索小图标" readonly id="create-activitySrc">
					<input type="hidden" id="activityId">
				</div>
			</div>

			<div class="form-group">
				<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a
						href="javascript:void(0);" data-toggle="modal" data-target="#findContacts"><span
						class="glyphicon glyphicon-search"></span></a></label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control" placeholder="点击左边搜索小图标" readonly id="create-contactsName">
					<input type="hidden" id="contactsId">
				</div>
			</div>

			<div class="form-group">
				<label for="create-describe" class="col-sm-2 control-label">描述</label>
				<div class="col-sm-10" style="width: 70%;">
					<textarea class="form-control" rows="3" id="create-describe"></textarea>
				</div>
			</div>

			<div class="form-group">
				<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
				<div class="col-sm-10" style="width: 70%;">
					<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
				</div>
			</div>

			<div class="form-group">
				<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control time2" id="create-nextContactTime">
				</div>
			</div>

		</form>
	</body>
</html>